<template>
	<!-- <view class="login-container">
		<view class="input-group">
			<text style="color:white;font-size: 22px;">用户名：</text>
			<input type="text" v-model="username" placeholder="请输入用户名" />
		</view>
		<view class="input-group">
			<text style="color:white;font-size: 22px;">密码：</text>
			<input type="password" v-model="password" placeholder="请输入密码" />
		</view>

		<button @click="login">登录</button>
		<button @click="showRegisterForm">注册</button>
	</view> -->





	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">欢迎使用，XXX小程序</view>
		<form class="cl">
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="text"  placeholder="请输入账号" maxlength="11" v-model="username" />
			</view>
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>
				<view class="line"></view>
				<input type="text"  maxlength="16" placeholder="请输入密码" v-model="password" />
			</view>
			<button @click="login">登 录</button>
			<button @click="showRegisterForm">注 册</button>
		</form>
		<view class="t-f"><text>————— 第三方账号登录 —————</text></view>
		<view class="t-e cl">
			<view class="t-g" @tap="wxLogin()">
				<image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image>
			</view>
			<view class="t-g" @tap="zfbLogin()">
				<image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	import service from '../../utils/request.js';

	export default {
		data() {
			return {
				username: '',
				password: '',
				verificationCode: '',
				nickname: '',
				Utoken: ''
			};
		},
		methods: {
			async login() {
				try {
					console.log('发送的数据:', {
						username: this.username,
						password: this.password
					}); //, verificationCode: this.verificationCode 
					const response = await service.post('/user/login', {
						username: this.username,
						password: this.password,
						// verificationCode: this.verificationCode
					});
					console.log('Username:', this.username);
					console.log('Password:', this.password);
					console.log('获取的数据:', response);
					const token = response.data;
					if (token) {
						localStorage.setItem('authToken', token);
						console.log("token设置");
						this.$nextTick(() => {
							uni.reLaunch({
								url: '/pages/my/my'
							});
						});
						// 调用setAuthorizationHeader函数来设置Authorization头部
						//setAuthorizationHeader(token);
						// 将token设置到请求拦截器中的Authorization头部中
						// service.interceptors.request.use(
						//   config => {
						//     const authToken = localStorage.getItem('authToken');
						//     if (authToken) {
						//       config.headers['Authorization'] = `Bearer ${authToken}`;
						//     }
						//     return config;
						//   },
						//   error => {
						//     return Promise.reject(error);
						//   }
						// );
					}


				} catch (error) {
					console.error('获取数据失败:', error);
				}
			},
			async sendVerificationCode() {
				try {
					const response = await service.post('/user/sendVerificationCode', {
						username: this.username
					});
					console.log('验证码发送成功:', response);
				} catch (error) {
					console.error('发送验证码失败:', error);
				}
			},
			showRegisterForm() {
				uni.navigateTo({
					url: '/subpages/register/register'
				});
			}
		}
	};
</script>

<style scoped>
	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		/* margin-bottom: -200rpx; */
	}

	.t-login {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 120rpx 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>